<template>
  <el-table v-if="selectedNode.props.operationPerm" :header-cell-style="{background:'#f5f6f6'}" :data="operatePerms" border style="width: 100%">
    <el-table-column prop="name" show-overflow-tooltip label="操作项"></el-table-column>
    <el-table-column prop="alisa" show-overflow-tooltip label="自定义别名">
      <template v-slot="scope">
        <el-input clearable v-model="selectedNode.props.operationPerm[scope.row.symbol].alisa"/>
      </template>
    </el-table-column>
    <el-table-column prop="show" show-overflow-tooltip label="是否启用">
      <template v-slot="scope">
        <el-switch :disabled="disable(scope.row.symbol)" v-model="selectedNode.props.operationPerm[scope.row.symbol].show"/>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { computed, onMounted, reactive, toRefs } from 'vue'
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia'
export default {
    name: "TaskOperationConfig",
    setup() {
        const storesWorkFlowConfig = useWorkFlowConfig()
        const workFlowConfig = storeToRefs(storesWorkFlowConfig)
        const state = reactive({
            active: 'properties'
        })
        const selectedNode = computed(() => {
            workFlowConfig.selectedNode.value
        })
        const operatePerms = computed(() => {
            if (selectedNode.value.type === 'ROOT') {
                return [
                {name: '提交', symbol: 'agree'},
                {name: '撤销', symbol: 'cancel'}
                ]
            } else if (selectedNode.value.type === 'APPROVAL') {
                return [
                {name: '同意', symbol: 'agree'},
                {name: '拒绝', symbol: 'refuse'},
                {name: '转交', symbol: 'transfer'},
                {name: '后加签', symbol: 'afterAdd'},
                {name: '退回', symbol: 'recall'},
                {name: '撤销', symbol: 'cancel'}
                ]
            } else {
                return []
            }
        })
        const loadPerms = () => {
            const opPerms = selectedNode.value.props.operationPerm || {}
            operatePerms.value.forEach(perm => {
                if (!opPerms[perm.symbol]){
                    opPerms[perm.symbol] = {alisa: perm.name, show: true}
                }
            })
            selectedNode.value.props['operationPerm'] = opPerms
        }
        const disable = (symbol) => {
            if (symbol === 'afterAdd' && selectedNode.value.props.mode === 'NEXT'){
                //顺序会签需要禁用加签
                selectedNode.value.props.operationPerm.afterAdd.show = false
                return true
            }
            return false
        }
        onMounted(() => {
            loadPerms()
        })
        return {
            ...toRefs(state),
            selectedNode,
            operatePerms,
            loadPerms,
            disable
        }
    }
}
</script>

<style lang="scss" scoped>
:deep(.el-table__row) {
  .el-input.is-focus .el-input__wrapper {
    box-shadow: none;
  }
  .cell{
    .el-input__wrapper, .el-input__inner, .el-textarea__inner{
      border-radius: 0;
      border: none;
      padding-left: 0;
      box-shadow: none;
    }
    .el-input__prefix{
      display: none;
    }
  }
}
</style>